<template>
    <div id="main_UserIncome" style="width: 400px;height: 400px"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name:"UserIncome",
    data(){
        return{}
    },
    mounted() {
        var chartDom = document.getElementById('main_UserIncome');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '用户收入',
                left: 'center'
            },
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                min: 100,
                max: 100000,
                text: ['高收入', '低收入'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#65B581', '#FFCE34', '#FD665F']
                }
            },
            dataset: {
                source: [
                    ['amount', 'product'],
                    [58212, '0-3万'],
                    [78254, '3-8万'],
                    [41032, '8-15万'],
                    [12755, '15-20万'],
                    [20145, '20-50万'],
                    [79146, '50万以上'],
                ]
            },
            grid: { containLabel: true },
            xAxis: { name: '人数' },
            yAxis: { type: 'category' },

            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    },

                }
            ]
        };

        option && myChart.setOption(option);
    },
}


</script>



<style scoped>

</style>